<script>
import ModuleCard from "../../../../components/business/module-card/index.vue";
import UForm from "../../../../uni_modules/uview-ui/components/u-form/u-form.vue";
import UFormItem from "../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import UniLink from "../../../../uni_modules/uni-link/components/uni-link/uni-link.vue";
import { getElectricPlanAll, getPlanDetail as getPlanDetailApi } from "../../../../api/common/power-station";
import { PLAN_TYPE } from "../../../../constant";
import {downloadFile} from "../../../../static/utils/download";

export default {
  name: "index",
  computed: {
    PLAN_TYPE() {
      return PLAN_TYPE
    }
  },
  components: {
    UniLink,
    UFormItem, UForm,
    ModuleCard
  },
  data() {
    return {
      id: '',
      tabOptions: [{
        name: '设计方案',
      }, {
        name: '组合方案',
      }],
      schemeType: '', // 设计方案 1 组合方案 2
      planList: [], // 方案列表
      assemblyList: [], // 组件列表
      gridConnectionList: [], // 并网箱列表
      inverterList: [], // 逆变器列表
      remark: '',
      rules: {
        field: [
          { required: true, message: '请选择方案类型', trigger: 'change' }
        ]
      }
    }
  },
  onLoad(options) {
    this.id = options.id;
    // this.getPlanDetail(this.id);
  },
  methods: {
    downloadFile,
    async getPlanDetail(id) {
      getPlanDetailApi(id).then(({ data }) => {
        // 判断类型
        if (data.schemeType === PLAN_TYPE.STANDARD) {
          this.tabOptions = [{
            name: '设计方案',
          }]
          this.planList.push({
            planType: data.planType,
            name: data.name,
            attach: data.attach
          })
        } else {
          this.planList = data.planList;
        }
        this.schemeType = data.schemeType;
        this.assemblyList = data.assemblyList;
        this.gridConnectionList = data.gridConnectionList;
        this.inverterList = data.inverterList;
      })
      // const { data } = await getElectricPlanAll(id);
      // if (data.zjs && data.zjs.length) {
      //   data.zjs.forEach(zj => {
      //     this.assemblyList.forEach(assembly => {
      //       if (zj.materialTypeId === assembly.itemTypeId) {
      //         assembly.zj = zj;
      //       }
      //     })
      //   })
      //   console.log(this.assemblyList, 99)
      // }
    },
    change(item) {
      console.log(item)
    }
  }
}
</script>

<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs :list="tabOptions" @click="change"></u-tabs>
    </u-sticky>
    <u--form
        labelPosition="left"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
        :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
    >
      <!--设计方案/标准方案-->
      <module-card v-for="plan in planList" :title="plan.name">
        <u-form-item
            label="方案类型"
            borderBottom
            ref="item1"
        >
          {{ plan.planType }}
        </u-form-item>
        <u-form-item
            label="方案名称"
            borderBottom
            ref="item1"
        >
          {{plan.name}}
        </u-form-item>
        <u-form-item
            label="参考图纸"
            borderBottom
            ref="item1"
        >
          <!--<view @click="downloadFile(plan.attach)">查看</view>-->
          <u--text mode="link" text="查看" :href="plan.attach" ></u--text>
        </u-form-item>
      </module-card>
      <view class="module">
        <template v-for="assembly in assemblyList">
          <u-form-item
              :label="assembly.itemTypeName"
          >
            {{ assembly.spec }}
          </u-form-item>
          <u-form-item
              :label="`${assembly.itemTypeName}数量`"
              borderBottom
          >
            {{ assembly.num }}
          </u-form-item>
        </template>
        <template v-for="inverter in inverterList">
          <u-form-item
              label="逆变器"
          >
            {{inverter.spec}}
          </u-form-item>
          <u-form-item
              label="逆变器数量"
              borderBottom
          >
            {{inverter.num}}
          </u-form-item>
        </template>

        <template v-for="gridConnection in gridConnectionList">
          <u-form-item
              label="并网箱"
          >
            {{gridConnection.spec}}
          </u-form-item>
          <u-form-item
              label="并网箱数量"
              borderBottom
          >
            {{gridConnection.num}}
          </u-form-item>
        </template>
        <u-form-item
            label="方案备注"
            ref="item1"
        >
          {{remark}}
        </u-form-item>
      </view>
    </u--form>
  </view>
</template>

<style scoped lang="scss">
.module {
  padding: 0px 20px;
  background: #fff;
}
</style>
